<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">

    <link rel="stylesheet" href="../css/plugins.reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/icon.css">
    <link rel="stylesheet" href="../css/home.css">
</head>
<body class="loaded bg-gray">
<div class="wrapper">
    <header class="header">
        <div class="logo pull-left">
            <a href="index.html" target="_self" title="首页">
                LOGO
            </a>
        </div>
        <div class="header-signin pull-right">
            <a href="#" id="js-signin-btn">登录</a>
            /
            <a href="#" id="js-signup-btn">注册</a>
        </div>
    </header>
    <div class="content-wrapper">
        <div class="personal-wrapper container">
            <div class="row">
                <div class="personal-sideBar">
                    <div class="avatar">
                        <img src="../images/home-index-bg.png" alt="">
                    </div>
                    <ul>
                        <li class="active"><a href="#"><i class="fa fa-user-o"></i>个人信息</a></li>
                        <li><a href="#"><i class="fa fa-book"></i>修改密码</a></li>
                        <li><a href="#"><i class="fa fa-bell-o"></i>上传头像</a></li>
                        <li><a href="#"><i class="fa fa-desktop"></i>查看成绩</a></li>
                    </ul>
                </div>
                <div class="personal-content">
                    <div class="user-wrapper">
                        <div class="user-wrapper-header cf">
                            <div class="user-related">
                                <a class="name" href="#">书友20171106094000990</a>
                                <span>考试场次<em>3</em></span>
                                <span>通过场次<em>5</em></span>
                            </div>
                            <div class="user-wrapper-btn">
                                <a id="userSettingBtn" href="#" class="btn-userSetting"><i class="fa fa-pencil"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="user-wrapper-content">
                        <dl>
                            <dt>ID</dt>
                            <dd>20171106094000990</dd>
                        </dl>
                        <dl class="saved">
                            <dt>昵称</dt>
                            <dd>
                                <p id="username">书友20171106094000990</p>
                            </dd>
                        </dl>
                        <dl class="higher modify">
                            <dt>昵称</dt>
                            <dd>
                            <span class="modify">
                                <input id="usernameInput" type="text" value="书友20171106094000990">
                            </span>
                            </dd>
                        </dl>
                        <dl class="saved">
                            <dt>性别</dt>
                            <dd>
                                <p id="sex">男</p>
                            </dd>
                        </dl>
                        <dl class="modify">
                            <dt>性别</dt>
                            <dd>
                                <input class="radio-danger" type="radio" name="sex" value="0" checked>男
                                <input class="radio-danger" type="radio" name="sex" value="1">女
                            </dd>
                        </dl>
                        <dl class="saved">
                            <dt>生日</dt>
                            <dd>
                                <p id="userBirthday">2017-12-29</p>
                            </dd>
                        </dl>
                        <dl class="higher modify">
                            <dt>生日</dt>
                            <dd>
                                <input id="userBirthdayInput" type="text" value="2017-12-29">
                            </dd>
                        </dl>
                        <dl class="saved">
                            <dt>简介</dt>
                            <dd>
                                <p id="userDesc">可以简单地描述自己</p>
                            </dd>
                        </dl>
                        <dl class="higher modify">
                            <dt>简介</dt>
                            <dd>
                                <div class="count-text">
                                    <span class="count"><em id="J_descCounter">0</em>/200</span>
                                    <textarea id="userDescInput" placeholder="可以简单地描述自己">可以简单地描述自己</textarea>
                                </div>
                            </dd>
                        </dl>
                        <dl class="higher modify">
                            <dt></dt>
                            <dd>
                                <button id="saveInfoBtn" class="button button-blue">保存</button>
                                <button id="cancelInfoBtn" class="button button-normal">取消</button>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="site-map">
                    <ul>
                        <li><a href="javascript:">系统简介</a></li>
                        <li><a href="javascript:">广告服务</a></li>
                        <li><a href="javascript:">试用洽谈</a></li>
                        <li><a href="javascript:">网站地图</a></li>
                        <li><a href="javascript:">联系方式</a></li>
                        <li><a href="javascript:">关于我们</a></li>
                    </ul>
                </div>
                <div class="copyright">
                    Copyright © 2017 <a href="javascript:">Gallonce</a> , Inc. All rights reserved.
                </div>
            </div>
        </div>
    </footer>
</div>

<script src="../plugins/jquery/jquery.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/layui/layui.all.js"></script>
<script src="../plugins/validator/validator.min.js"></script>
<script src="../plugins/sweetalert/sweetalert2.all.min.js"></script>
<script src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="../plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>

<script src="../js/common.js"></script>
<script>
    $(function () {
        var oldName = $('#usernameInput').val(),
            oldSex = $('.user-wrapper-content input[type=radio][name="sex"]').val(),
            oldBirthday = $('#userBirthdayInput').val(),
            oldDesc = $('#userDescInput').val();

        // 屏幕缩放监听
        $(window).on('resize', function () {
            $('.personal-content').css('min-height', ($(window).height() - 189) + 'px')
        }).trigger('resize');

        // 编辑按钮
        $('#userSettingBtn').on('click', function () {
            $('.user-wrapper-content').find('.modify').show();
            $('.user-wrapper-content').find('.saved').hide();
            $('#J_descCounter').text($('#userDescInput').val().length);
        });

        // 保存
        $('#saveInfoBtn').on('click', function () {

            $('#username').text($('#usernameInput').val());
            $('#userBirthday').text($('#userBirthdayInput').val());
            $('#userDesc').text($('#userDescInput').val());
            console.log($('.user-wrapper-content input[type=radio][name="sex"]:checked').val());
            $('#sex').text($('.user-wrapper-content input[type=radio][name="sex"]:checked').val() == 1 ? '女' : '男');

            $('.user-wrapper-content').find('.modify').hide();
            $('.user-wrapper-content').find('.saved').show();
        });

        // 取消保存
        $('#cancelInfoBtn').on('click', function () {

            $('#usernameInput').val(oldName);
            $('.user-wrapper-content input[type=radio][name="sex"]').val(oldSex);
            $('#userBirthdayInput').val(oldBirthday);
            $('#userDescInput').val(oldDesc);

            $('.user-wrapper-content').find('.modify').hide();
            $('.user-wrapper-content').find('.saved').show();
        });

        $('#userBirthdayInput').val() === "" ? $('#datetimepicker2').val(new Date().toLocaleDateString()) : true;
        $('#userBirthdayInput').datetimepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            language: 'zh-CN',
            minView: 'month'
        });

    });
</script>

</body>
</html>